<template>
    <el-dialog v-model="dialogFormVisible" :title="flag ? '新增' : '修改'">
        <el-form :model="form" label-width="auto" :inline="true" label-position="top" :rules="rules" ref="ruleFormRef"
            v-loading="isLoading" element-loading-text="数据加载中...">
            <el-form-item label="字典名称" prop="dictName">
                <el-input v-model="form.dictName" placeholder="请输入字典名称" />
            </el-form-item>
            <el-form-item label="字典编码" prop="dictCode">
                <el-input v-model="form.dictCode" placeholder="请输入字典编码" />
            </el-form-item>
            <el-form-item label="备注" prop="des" style="width: 100%;">
                <el-input type="textarea" v-model="form.des" placeholder="请输入备注" />
            </el-form-item>
            <el-form-item label="状态" style="width: 100%;">
                <el-switch v-model="form.status" :active-value="'0'" :inactive-value="'1'" inline-prompt
                    active-text="正常" inactive-text="禁用" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">返回</el-button>
                <el-button type="primary" :disabled="isLoading" @click="addOrEdit">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup name="addEdit">
import { ref } from "vue";
import api from "@/api"
import { ElMessage } from 'element-plus'

const isLoading = ref(false)
const ruleFormRef = ref()
const flag = ref(false)
const dialogFormVisible = ref(false)
const form = ref({ status: '0' })
const rules = ref({
    dictName: [
        { required: true, message: '请输入字典名称', trigger: 'blur' },
    ],
    dictCode: [
        { required: true, message: '请输入字典编码', trigger: 'blur' },
    ],
    des: [
        { required: true, message: '请输入备注', trigger: 'blur' },
    ]
})

const init = async (id) => {
    isLoading.value = true
    dialogFormVisible.value = true
    if (id) {
        flag.value = false
        const res = await api.post('/system/dict/queryById', { id: id })
        if (res.data.code === 200) {
            form.value = res.data.data
        } else {
            ElMessage.error(res.data.msg)
        }
    } else {
        flag.value = true
        form.value = { status: '0' }
    }
    isLoading.value = false
}
const emit = defineEmits(['serversUpdated']);
const addOrEdit = () => {
    ruleFormRef.value.validate(async (valid) => {
        if (valid) {
            isLoading.value = true
            let url
            if (flag.value) {
                url = '/system/dict/add'
            } else {
                url = '/system/dict/edit'
            }
            const res = await api.post(url, form.value)
            if (res.data.code === 200) {
                ElMessage.success(res.data.msg)
                emit('serversUpdated')
                dialogFormVisible.value = false
            } else {
                ElMessage.error(res.data.msg)
            }
            isLoading.value = false
        }
    })
}
defineExpose({
    init
});
</script>